<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>志愿签到 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
            min-height: 100vh;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 签到卡片 */
        .checkin-card {
            background: white;
            margin: 20px 15px;
            border-radius: 20px;
            padding: 30px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .checkin-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%);
            transform: rotate(45deg);
        }
        
        .checkin-content {
            position: relative;
            z-index: 2;
        }
        
        .checkin-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.3);
        }
        
        .checkin-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .checkin-date {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .checkin-status {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            border: none;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
        }
        
        .checkin-status:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
        }
        
        .checkin-status.checked {
            background: linear-gradient(135deg, #52c41a, #73d13d);
        }
        
        .checkin-info {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f0f2f5;
        }
        
        .info-item {
            text-align: center;
        }
        
        .info-number {
            font-size: 18px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 5px;
        }
        
        .info-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 签到记录 */
        .checkin-history {
            background: white;
            margin: 0 15px 20px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);
        }
        
        .history-header {
            padding: 20px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .history-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .history-list {
            padding: 0 20px;
        }
        
        .history-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #f0f2f5;
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .history-date {
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }
        
        .history-time {
            font-size: 12px;
            color: #666;
        }
        
        .history-status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .status-present {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .status-late {
            background: #fff7e6;
            color: #fa8c16;
        }
        
        .status-absent {
            background: #fff2f0;
            color: #ff4d4f;
        }
        
        /* 月度日历 */
        .calendar-section {
            background: white;
            margin: 0 15px 20px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);
        }
        
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .calendar-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .calendar-nav {
            display: flex;
            gap: 10px;
        }
        
        .nav-btn {
            background: #f0f2f5;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-btn:hover {
            background: #ff6b00;
            color: white;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }
        
        .calendar-header-day {
            text-align: center;
            padding: 8px 0;
            font-size: 12px;
            color: #999;
            font-weight: bold;
        }
        
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .calendar-day:hover {
            background: #f0f2f5;
        }
        
        .calendar-day.today {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        .calendar-day.checked {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .calendar-day.checked::after {
            content: '✓';
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 8px;
        }
        
        .calendar-day.late {
            background: #fff7e6;
            color: #fa8c16;
        }
        
        .calendar-day.late::after {
            content: '!';
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 8px;
        }
        
        /* 统计卡片 */
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 0 15px 20px;
        }
        
        .stats-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
        }
        
        .stats-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .stats-number {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .stats-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 浮动按钮 */
        .floating-menu {
            position: fixed;
            bottom: 80px;
            right: 20px;
            z-index: 999;
        }
        
        .floating-btn {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .floating-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
        
        /* 动画效果 */
        @keyframes checkIn {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .checkin-animation {
            animation: checkIn 0.6s ease-in-out;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">志愿签到</span>
        </div>
        <div class="navbar-right" onclick="showSettings()">
            ⚙️
        </div>
    </div>
    
    <!-- 签到卡片 -->
    <div class="checkin-card">
        <div class="checkin-content">
            <div class="checkin-icon" id="checkinIcon">👆</div>
            <div class="checkin-title">志愿服务签到</div>
            <div class="checkin-date" id="currentDate">2025年10月18日 星期五</div>
            <button class="checkin-status" id="checkinBtn" onclick="doCheckin()">
                点击签到
            </button>
            <div class="checkin-info">
                <div class="info-item">
                    <div class="info-number" id="consecutiveDays">7</div>
                    <div class="info-label">连续天数</div>
                </div>
                <div class="info-item">
                    <div class="info-number" id="totalDays">28</div>
                    <div class="info-label">累计天数</div>
                </div>
                <div class="info-item">
                    <div class="info-number" id="currentPoints">50</div>
                    <div class="info-label">今日积分</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
        <div class="stats-card">
            <div class="stats-icon">📊</div>
            <div class="stats-number">92%</div>
            <div class="stats-label">本月出勤率</div>
        </div>
        <div class="stats-card">
            <div class="stats-icon">🏆</div>
            <div class="stats-number">1,250</div>
            <div class="stats-label">累计积分</div>
        </div>
        <div class="stats-card">
            <div class="stats-icon">⭐</div>
            <div class="stats-number">8</div>
            <div class="stats-label">全勤奖励</div>
        </div>
        <div class="stats-card">
            <div class="stats-icon">👥</div>
            <div class="stats-number">第8名</div>
            <div class="stats-label">排行榜</div>
        </div>
    </div>
    
    <!-- 月度签到日历 -->
    <div class="calendar-section">
        <div class="calendar-header">
            <div class="calendar-title">
                <span>📅</span>
                <span id="calendarMonth">2025年10月</span>
            </div>
            <div class="calendar-nav">
                <button class="nav-btn" onclick="prevMonth()">‹</button>
                <button class="nav-btn" onclick="nextMonth()">›</button>
            </div>
        </div>
        <div class="calendar-grid" id="calendarGrid">
            <!-- 日历将通过JavaScript生成 -->
        </div>
    </div>
    
    <!-- 签到记录 -->
    <div class="checkin-history">
        <div class="history-header">
            <span>📋</span>
            <div class="history-title">最近签到记录</div>
        </div>
        <div class="history-list">
            <div class="history-item">
                <div class="history-info">
                    <div>
                        <div class="history-date">今天</div>
                        <div class="history-time">08:30</div>
                    </div>
                </div>
                <div class="history-status status-present">准时</div>
            </div>
            <div class="history-item">
                <div class="history-info">
                    <div>
                        <div class="history-date">昨天</div>
                        <div class="history-time">08:25</div>
                    </div>
                </div>
                <div class="history-status status-present">准时</div>
            </div>
            <div class="history-item">
                <div class="history-info">
                    <div>
                        <div class="history-date">10月16日</div>
                        <div class="history-time">09:05</div>
                    </div>
                </div>
                <div class="history-status status-late">迟到</div>
            </div>
            <div class="history-item">
                <div class="history-info">
                    <div>
                        <div class="history-date">10月15日</div>
                        <div class="history-time">08:15</div>
                    </div>
                </div>
                <div class="history-status status-present">准时</div>
            </div>
            <div class="history-item">
                <div class="history-info">
                    <div>
                        <div class="history-date">10月14日</div>
                        <div class="history-time">--</div>
                    </div>
                </div>
                <div class="history-status status-absent">缺勤</div>
            </div>
        </div>
    </div>
    
    <!-- 浮动菜单 -->
    <div class="floating-menu">
        <div class="floating-btn" onclick="showStatistics()">📊</div>
        <div class="floating-btn" onclick="showRewards()">🎁</div>
        <div class="floating-btn" onclick="shareProgress()">📤</div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">👆</div>
            <div class="nav-label">签到</div>
        </div>
    </div>
    
    <script>
        // 签到状态
        let hasCheckedIn = false;
        let currentDate = new Date();
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            updateCurrentDate();
            generateCalendar();
            checkTodayStatus();
        });
        
        // 更新当前日期显示
        function updateCurrentDate() {
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                weekday: 'long' 
            };
            const dateStr = currentDate.toLocaleDateString('zh-CN', options);
            document.getElementById('currentDate').textContent = dateStr;
        }
        
        // 检查今日签到状态
        function checkTodayStatus() {
            const saved = localStorage.getItem('checkin_' + getDateString(currentDate));
            if (saved) {
                hasCheckedIn = true;
                updateCheckinButton(true);
            }
        }
        
        // 签到功能
        function doCheckin() {
            if (hasCheckedIn) {
                alert('今日已签到！\\n\\n连续签到可获得额外积分奖励\\n明天记得继续签到哦~');
                return;
            }
            
            hasCheckedIn = true;
            const now = new Date();
            const time = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
            
            // 保存签到记录
            localStorage.setItem('checkin_' + getDateString(currentDate), time);
            
            // 更新UI
            updateCheckinButton(true);
            updateConsecutiveDays();
            addCheckinAnimation();
            
            // 计算积分
            const points = calculatePoints(now);
            document.getElementById('currentPoints').textContent = points;
            
            alert(`签到成功！\\n\\n签到时间：${time}\\n获得积分：${points}分\\n${getCheckinMessage(now)}`);
        }
        
        // 更新签到按钮
        function updateCheckinButton(checked) {
            const btn = document.getElementById('checkinBtn');
            const icon = document.getElementById('checkinIcon');
            
            if (checked) {
                btn.textContent = '已签到';
                btn.classList.add('checked');
                icon.textContent = '✅';
            } else {
                btn.textContent = '点击签到';
                btn.classList.remove('checked');
                icon.textContent = '👆';
            }
        }
        
        // 计算积分
        function calculatePoints(time) {
            const hour = time.getHours();
            const minute = time.getMinutes();
            
            if (hour < 8 || (hour === 8 && minute <= 30)) {
                return 50; // 准时签到
            } else if (hour < 9) {
                return 30; // 迟到但在允许范围内
            } else {
                return 10; // 严重迟到
            }
        }
        
        // 获取签到消息
        function getCheckinMessage(time) {
            const hour = time.getHours();
            const minute = time.getMinutes();
            
            if (hour < 8 || (hour === 8 && minute <= 30)) {
                return '准时签到，表现优秀！';
            } else if (hour < 9) {
                return '稍有迟到，下次努力准时！';
            } else {
                return '迟到较多，请注意时间管理！';
            }
        }
        
        // 更新连续天数
        function updateConsecutiveDays() {
            let consecutive = 1;
            let checkDate = new Date(currentDate);
            checkDate.setDate(checkDate.getDate() - 1);
            
            while (checkDate >= new Date('2025-10-01')) {
                const saved = localStorage.getItem('checkin_' + getDateString(checkDate));
                if (saved) {
                    consecutive++;
                    checkDate.setDate(checkDate.getDate() - 1);
                } else {
                    break;
                }
            }
            
            document.getElementById('consecutiveDays').textContent = consecutive;
        }
        
        // 添加签到动画
        function addCheckinAnimation() {
            const card = document.querySelector('.checkin-card');
            card.classList.add('checkin-animation');
            setTimeout(() => {
                card.classList.remove('checkin-animation');
            }, 600);
        }
        
        // 生成日历
        function generateCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();
            const today = new Date();
            
            document.getElementById('calendarMonth').textContent = 
                `${year}年${month + 1}月`;
            
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());
            
            const grid = document.getElementById('calendarGrid');
            grid.innerHTML = '';
            
            // 添加星期标题
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            weekdays.forEach(day => {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-header-day';
                dayElement.textContent = day;
                grid.appendChild(dayElement);
            });
            
            // 添加日期
            for (let i = 0; i < 42; i++) {
                const date = new Date(startDate);
                date.setDate(startDate.getDate() + i);
                
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.textContent = date.getDate();
                
                // 判断是否为当前月
                if (date.getMonth() !== month) {
                    dayElement.style.color = '#ccc';
                }
                
                // 判断是否为今天
                if (date.toDateString() === today.toDateString()) {
                    dayElement.classList.add('today');
                }
                
                // 检查签到状态
                const saved = localStorage.getItem('checkin_' + getDateString(date));
                if (saved && date.getMonth() === month) {
                    const time = saved.split(':');
                    const hour = parseInt(time[0]);
                    const minute = parseInt(time[1]);
                    
                    if (hour < 8 || (hour === 8 && minute <= 30)) {
                        dayElement.classList.add('checked');
                    } else {
                        dayElement.classList.add('late');
                    }
                }
                
                grid.appendChild(dayElement);
            }
        }
        
        // 获取日期字符串
        function getDateString(date) {
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0');
        }
        
        // 上一月
        function prevMonth() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            generateCalendar();
        }
        
        // 下一月
        function nextMonth() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            generateCalendar();
        }
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 显示设置
        function showSettings() {
            alert('签到设置\\n\\n• 签到时间：8:00-9:00\\n• 准时奖励：50积分\\n• 迟到扣分：20积分\\n• 连续奖励：额外10%积分\\n\\n功能开发中...');
        }
        
        // 显示统计
        function showStatistics() {
            alert('签到统计\\n\\n本月数据：\\n• 签到天数：16天\\n• 出勤率：92%\\n• 准时率：87%\\n• 累计积分：1,250分\\n\\n详细统计功能开发中...');
        }
        
        // 显示奖励
        function showRewards() {
            alert('签到奖励\\n\\n可兑换奖励：\\n• 连续7天：志愿者徽章\\n• 连续15天：文具礼品\\n• 连续30天：荣誉证书\\n• 全月全勤：特殊奖励\\n\\n奖励中心开发中...');
        }
        
        // 分享进度
        function shareProgress() {
            alert('分享签到进度\\n\\n我已连续签到7天！\\n累计获得1,250积分\\n在志愿者排行榜第8名\\n\\n一起来参与志愿服务吧！\\n\\n分享功能开发中...');
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.checkin-card, .stats-card, .calendar-section, .checkin-history');
            elements.forEach((element, index) => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    element.style.transition = 'all 0.5s ease';
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>